<style scoped>
  .rj-topbar {
    height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative
  }
  .list {
    background: #eee;
  }
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .weui_navbar_item {
    font-size: 14px;
  }
  .weui_navbar_item.weui_bar_item_on {
    color: #3cc51f;
  }
  .weui-loadmore_line .weui-loadmore__tips {
    background-color: #eee;
  }
  .list {
    overflow: auto;
  }
  .rj-cell {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell.minpad{
    padding-right: 10px !important;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }
  .rj-cell.note{
    width: 100%;
  }
  .rj-cell.note label{
    float: left;
  }
  .rj-cell.note span{
    width: 80%;
    display: inline-block;
  }
  .weui-cells {
    margin-top: 0;
  }
  .rj-wrap {
    background: #eee;
    overflow:auto;overflow-x: hidden
  }
  .rj-cont {
    background: #fff;
  }
  .weui-panel {
    background: #eee;
  }
  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
  }
  .weui-panel {
    margin-top: 0;
    text-align: left;
  }
  .demos-content-padded {
    padding: 15px;
  }
  .attachimg {
    /*width: 100%;*/
  }
  .tipp {
    position: absolute;top: 0px;background: rgba(255,0,0,0.5);color:#fff;display: inline-block;width: 85px;text-align: center;
  }
  .rj-cell-child-tit {
    background: #f9f9f9;
    font-size: 14px;
    padding: 5px 15px;
    border-bottom: 1px solid #eee;
  }
</style>
<template>
  <div>
    <div style="height: 50px; line-height: 50px; background: #f7f7f7; text-align: center; font-size: 16px; border-bottom: 1px solid #bdbbbc; position: relative">
      订单详情
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="../../assets/back.png" style="width: 20px" />
      </a>
    </div>
    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__bd">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="rj-cell max">
            <label>运单编号：</label>
            <span>{{sellform.sellcode}}</span>
          </div>
          <div class="rj-cell max">
            <label>申请人：</label>
            <span>{{sellform.applyname}}</span>
            <span>{{sellform.depname}}</span>
          </div>
          <div class="rj-cell max">
            <label>客户：</label>
            <span>{{sellform.customername}}</span>
            <span>{{customer.typname}}</span>
          </div>
          <div class="rj-cell max minpad">
            <label>销售形式：</label>
            <span>{{sellform.saletypename}}</span>
          </div>
          <div class="rj-cell max">
            <label>发货库房：</label>
            <span>{{sellform.storeroomname}}</span>
          </div>
          <div class="rj-cell max">
            <label>状态：</label>
            <span>{{sellform.statusname}}</span>
          </div>
          <div class="rj-cell">
            <label>备注：</label>
            <span style="color: #000;">{{sellform.remarks}}</span>
          </div>
          <div class="rj-cell max">
            <label>创建时间：</label>
            <span>{{sellform.createtime}}</span>
          </div>
        </div>
      </div>
      <div class="weui-panel__hd">货运路线</div>
      <div class="weui-panel__bd">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="rj-cell max">
            <label>发货地址：</label>
            <span>{{sellform.deliprovince + sellform.delicity + sellform.delidistrict + sellform.deliaddress}}</span>
          </div>
          <div class="rj-cell max">
            <label>发货联系人：</label>
            <span>{{sellform.delicontact}}</span>
            <span>{{sellform.delicontacttel}}</span>
          </div>
          <div class="rj-cell max">
            <label>收货地址：</label>
            <span>{{sellform.arriprovince + sellform.arricity + sellform.arridistrict + sellform.arriaddres}}</span>
          </div>
          <div class="rj-cell max">
            <label>收货联系人：</label>
            <span>{{sellform.arricontact}}</span>
            <span>{{sellform.arricontactno}}</span>
          </div>
        </div>
      </div>
      <div class="weui-panel__hd" v-if="sellform.carcode != ''">派车信息</div>
      <div class="weui-panel__bd" v-if="sellform.carcode != ''">
        <div class="weui-form-preview billitem rj-cont-tit">
          <!--          <div class="rj-cell max">-->
          <!--            <label>是否压车：</label>-->
          <!--            <span>{{sellform.unloaddesc}}</span>-->
          <!--          </div>-->
          <div class="rj-cell max">
            <label>承运人：</label>
            <span>{{sellform.carcode}}</span>
            <span>{{sellform.drivername}}</span>
            <span>{{sellform.driverphone}}</span>
          </div>
          <div class="rj-cell max">
            <label>物流公司：</label>
            <span>{{sellform.wlcompany}}</span>
          </div>
          <div class="rj-cell max">
            <label>装车时间：</label>
            <span>{{sellform.loadtime}}</span>
          </div>
          <div class="rj-cell max">
            <label>卸货时间：</label>
            <span>{{sellform.unloadtime}}</span>
          </div>
          <div class="rj-cell max">
            <label>货运时长：</label>
            <span>{{sellform.calloadtime}}</span>
          </div>
        </div>
      </div>
      <div class="weui-panel__hd" v-if="sellform.fareprice != '' && sellform.fareprice != 0">运费信息</div>
      <div class="weui-panel__bd"  v-if="sellform.fareprice != '' && sellform.fareprice != 0">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="rj-cell max">
            <label>结算方式：</label>
            <span>{{sellform.faretypename}}</span>
          </div>
          <div class="rj-cell max" v-if="sellform.faretype == 1">
            <label>预计运价：</label>
            <span>{{sellform.logprice}} {{sellform.farepricetypename}}</span>
          </div>
          <div class="rj-cell max" v-if="sellform.faretype == 1">
            <label>实际运价：</label>
            <span>{{sellform.fareprice}} {{sellform.farepricetypename}}</span>
          </div>
          <div class="rj-cell max" v-if="sellform.faretype == 1">
            <label>运费金额：</label>
            <span>{{sellform.logfinprice}} 元</span>
          </div>
          <div class="rj-cell max" v-if="sellform.faretype == 1">
            <label>结算状态：</label>
            <span>{{sellform.farestatus == 1 ? '未结算' : '已结算'}}</span>
            <span>{{sellform.finalper}}</span>
            <span>{{sellform.finaltime}}</span>
          </div>
        </div>
      </div>
      <div class="weui-panel__hd" v-if="sellform.status > 9 && saladmperms == 1">结算信息</div>
      <div class="weui-panel__bd" v-if="sellform.status > 9 && saladmperms == 1">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="rj-cell max">
            <label>扣前金额：</label>
            <span>{{sellform.amount}} 元</span>
            <span></span>
          </div>
          <div class="rj-cell max">
            <label>结算金额：</label>
            <span>{{sellform.finalamount}} 元</span>
            <span></span>
          </div>
        </div>
      </div>
      <div class="weui-panel__hd">货品信息</div>
      <div class="weui-panel__bd">
        <div class="weui-form-preview billitem rj-cont-tit" v-for="(item, index) in sellitems" :key="item.guid">
          <div class="rj-cell-child-tit">产品明细 {{index+1}}</div>

          <div class="rj-cell max">
            <label>品种：</label>
            <span>{{item.productname}}</span>
            <span>{{item.spname}}</span>
            <span v-if="saladmperms == 1 || edpriceperms ==1 || setlperms==1 || backperms==1">{{item.price}}元/吨</span>
          </div>
          <div class="rj-cell max">
            <label>订单重量：</label>
            <span>{{item.weight}} 吨</span>
          </div>
          <div class="rj-cell">
            <label>备注信息：</label>
            <span>{{item.remark}}</span>
          </div>
          <div  v-for="(item, index) in sellitems" :key="item.guid"  v-if="sellform.status > 9 && saladmperms == 1">
            <!--            <div class="rj-cell-child-tit">产品明细 {{index+1}}</div>-->
            <!--            <div class="rj-cell max">-->
            <!--              <label>品种：</label>-->
            <!--              <span>{{item.productname}}</span>-->
            <!--              <span>{{item.spname}}</span>-->
            <!--            </div>-->
            <!--            <div class="rj-cell max">-->
            <!--              <label>价格：</label>-->
            <!--              <span>{{item.price}}</span>-->
            <!--            </div>-->
            <!--            <div class="rj-cell max">-->
            <!--              <label>发货净重：</label>-->
            <!--              <span>{{item.loadweight}} 吨</span>-->
            <!--            </div>-->
            <div class="rj-cell max">
              <label>到货净重：</label>
              <span>{{item.unloadweight}} 吨</span>
            </div>
            <div class="rj-cell max">
              <label>包装重量：</label>
              <span>{{item.packweight}} kg</span>
            </div>
            <div class="rj-cell max">
              <label>扣杂率：</label>
              <span>{{item.deductrate}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="weui-panel__hd" v-if="hasWeightList">出库及到货信息</div>
      <div class="weui-panel__bd" v-if="hasWeightList">
        <div class="weui-form-preview billitem rj-cont-tit">
          <div class="rj-cell max" v-if="JSON.stringify(unLoadWeightL) != '{}'">
            <label>净重：</label>
            <span>{{unLoadWeightL.weight + " 吨"}}</span>
          </div>
          <div class="rj-cell max" v-if="JSON.stringify(unLoadWeightL) != '{}'">
            <label>损耗：</label>
            <span>{{sellform.shWeight + " 吨"}}</span>
          </div>
          <div class="rj-cell-child-tit" v-if="JSON.stringify(loadWeightL) != '{}'">发货过磅单</div>
          <div class="rj-cell max" v-if="JSON.stringify(loadWeightL) != '{}'">
            <label>净重：</label>
            <span>{{loadWeightL.weight}} 吨</span>
            <span>{{loadWeightL.operName}}</span>
            <span>{{loadWeightL.createtime}}</span>
          </div>
          <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="JSON.stringify(loadWeightL) != '{}' && loadWeightL.imgs.length > 0">
            <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">拉货过磅单</p>
            <div class="exp uploaderFiles" style="display: inline-block;">
              <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in loadWeightL.imgs" :key="image.guid"  alt="" onerror="javascript:this.src='../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
            </div>
          </div>
          <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="sellform.whoutform.length >0 && sellform.whoutform[0].imgs.length > 0">
            <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">出库单</p>
            <div class="exp uploaderFiles" style="display: inline-block;">
              <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in sellform.whoutform[0].imgs" :key="image.guid"  alt="" onerror="javascript:this.src='../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
            </div>
          </div>
          <div class="rj-cell-child-tit" v-show="JSON.stringify(unLoadWeightL) != '{}'">卸货过磅单</div>
          <div class="rj-cell max" v-show="JSON.stringify(unLoadWeightL) != '{}'">
            <label>净重：</label>
            <span>{{unLoadWeightL.weight}} 吨</span>
            <span>{{unLoadWeightL.operName}}</span>
            <span>{{unLoadWeightL.createtime}}</span>
          </div>
          <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="JSON.stringify(unLoadWeightL) != '{}' && unLoadWeightL.imgs.length > 0">
            <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">拉货过磅单</p>
            <div class="exp uploaderFiles" style="display: inline-block;">
              <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in unLoadWeightL.imgs" :key="image.guid"  alt="" onerror="javascript:this.src='../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
            </div>
          </div>
        </div>
      </div>

      <div class="weui-panel__bd"     ref="qaform" v-if="qaform.qacode != '' && qaform.qacode != null">
        <div class="weui-cells__title" style="height: 10px;line-height: 10px">质检信息</div>
        <div class="weui-form-preview billitem rj-cont-tit">

          <div    style="border-top: 1px solid #eee;">
            <div  >
              <div class="rj-cell max">
                <label><span style="font-size: 14px;padding: 0;">质检单编号：</span></label>
                <span>{{qaform.qacode}}</span>
              </div>
            </div>
            <div class="rj-cell max">
              <label>抽检数量：</label>
              <span>{{qaform.chkpknum}} 包</span>
              <span> {{qaform.chkwght}} Kg</span>

              <label>合格重量：</label>
              <span> {{qaform.okweight}} Kg</span>
            </div>
            <div class="rj-cell max">
              <label>不合格重量：</label>
              <span> {{qaform.notokweight}} Kg</span>
              <label>不合格率：</label>
              <span> {{qaform.unqualifiedchkrate}}%</span>
            </div>
            <div class="rj-cell max">
              <label>土杂重量：</label>
              <span> {{qaform.soilchkweight}} Kg</span>
              <label>土杂率：</label>
              <span> {{qaform.soilchkrate}}%</span>
            </div>

            <!--            <div class="rj-cell max">-->
            <!--              <label>大薯重量：</label>-->
            <!--              <span> {{qaform.bigweight}} Kg</span>-->
            <!--              <label>大薯率：</label>-->
            <!--              <span> {{qaform.bigrate}}%</span>-->
            <!--            </div>-->

            <br>
            <div class="rj-cell max">
              <label>合格率：</label>
              <span> {{Number((100-qaform.deductrate)).toFixed(2)}} %</span>
            </div>

            <div class="rj-cell max">
              <label>质检人：</label>
              <span>{{qaform.operatorname}}</span>
              <label>质检时间：</label>
              <span>{{qaform.createdate}}</span>
            </div>
            <div class="weui-media-box weui-media-box_text uploaderFiles" v-if="qaFormImg != undefined && qaFormImg.length > 0">
              <p class="exp" style="font-size: 12px;color: #999;padding: 5px 0;">质检单照片</p>
              <div class="exp uploaderFiles" style="display: inline-block;">
                <img class="attachimg" style="padding-right: 5px;"  v-for="(image, index) in qaFormImg" :key="image.guid"  alt="" onerror="javascript:this.src='../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <OperationLogs2 :orderid="id" :srguid="sellform.storermguid" :departid="sellform.depguid"></OperationLogs2>
    </div>
  </div>
</template>

<script>
  import OperationLogs2 from '../common/OperationLogs2'

  export default {
    name: 'ViewSellform',
    data () {
      return {
        openid: localStorage.openid,//'oIuV2v77MaLCAQILhjI6h6oTWpHI',
        id: '',
        sellform: '',
        sellitems: [],
        customer: '',
        hasWeightList: false,
        loadWeightL: {},
        unLoadWeightL: {},
        saladmperms: localStorage.getItem('saladmperms'),
        edpriceperms: localStorage.getItem('edpriceperms'),
        setlperms: localStorage.getItem('setlperms'),
        backperms: localStorage.getItem('backperms'),
        qaform:[],
        qaFormImg:[]
      }
    },
    components: {
      OperationLogs2
    },
    created() {

    },
    mounted () {
      window.addEventListener('setItem', ()=> {
        this.saladmperms = localStorage.getItem('saladmperms');
        this.edpriceperms = localStorage.getItem('edpriceperms');
        this.setlperms = localStorage.getItem('setlperms');
        this.backperms = localStorage.getItem('backperms');
        console.log('saladmperms:', this.saladmperms)
      })

      this.id = this.$route.query.id;
      this.getOrder(this.id);


      $('.weui-panel').on('click', '.uploaderFiles .attachimg', function () {
        var num = $(this).parent().children().not( ".exp" ).length;
        var imgArr = [];
        for (var i=0; i<num; i++) {
          imgArr.push($(this).parent().find('.attachimg').eq(i).data('img'));
        }
        var pnum = $(this).parent().find('.exp').length;
        var index = pnum > 0 ? $(this).index() - pnum : $(this).index();
        var pb = $.photoBrowser({
          items: imgArr,
          initIndex: index
        });
        pb.open();
      });

    },
    methods: {
      getOrder: function (id) {
        this.axios({
          method: 'get',
          url: '/sales/Sellform!detail.action?openid=' + this.openid,
          params: {orderid: id}
        }).then(response => {
          if (response.data.status == 'true') {
            let res = response.data.result;
            this.sellform = res;
            this.sellitems = res.items;
            this.customer = res.customer;
            let weightLst = res.weightlist;

            this.hasWeightList = weightLst.length > 0 ? true : false;
            /**
             2020-3-23
             liukx
             销售订单详情添加质检信息
             */
            let data = response.data;
            this.qaform = data.qaForm != null ? data.qaForm : {};
            this.qaFormImg = data.qaFormImg;

            for (let i=0; i<weightLst.length; i++) {
              switch (weightLst[i].wtype) {
                case 1:
                  this.loadWeightL = weightLst[i];
                  break;
                case 2:
                  this.unLoadWeightL = weightLst[i];
                  break;
              }
            }
          } else if (response.data.status == 'true') {
            this.toastError(response.data.result);
          } else {
            this.toastError('系统错误');
          }
        });
      },
      status2Txt: function(param) {
        let res = '';
        switch (param) {
          case 1:
            res = '草稿';
            break;
          case 2:
            res = '内部审批';
            break;
          case 3:
            res = '土豆集审批';
            break;
          case 4:
            res = '待加工';
            break;
          case 5:
            res = '生产加工';
            break;
          case 6:
            res = '待出库';
            break;
          case 7:
            res = '已出库';
            break;
          case 8:
            res = '运输中';
            break;
          case 9:
            res = '已到货';
            break;
          case 10:
            res = '待结算';
            break;
          case 11:
            res = '已回款';
            break;
          case 0:
            res = '已作废';
            break;
        }
        return res;
      },
    }
  }
</script>
